<template>
  <Card title="水质化学指标(内部考核)">
    <template #content>
      <div class="content" ref="chartContainer"></div>
    </template>
  </Card>
</template>
<script setup>
defineOptions({
  name: "LeftCard3",
  inheritAttrs: false,
});
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

import { getCurrentInstance, onMounted, ref } from "vue";
const { proxy } = getCurrentInstance();

const chartContainer = ref(null);

const colorList = [
  // 浅-深
  ["#2973DE", "#4397FE"],
  ["#1DBBC1", "#7CE6EA"],
  ["#11AA64", "#7CEAB0"],
  ["#C2A713", "#D2D379"],
  ["#C24913", "#D99341"],
];

function initEchart() {
  const chart = proxy.echarts.init(chartContainer.value);
  let data = props.data.internalGroupList;
  data.forEach((item, index) => {
    item.name = INTERNAL_DICT[item.name]
    item.itemStyle = {
      normal: {
        color: new proxy.echarts.graphic.LinearGradient(1, 0, 0, 0, [
          {
            offset: 0,
            color: colorList[index][0],
          },
          {
            offset: 1,
            color: colorList[index][1],
          },
        ]),
      },
    };
  });
  const sum = data.reduce(
    (accumulator, currentValue) => accumulator + currentValue.value,
    0
  );
  let lab =
    "//img.isqqw.com/profile/upload/2023/11/15/fabee49f-3e3b-45a6-a5d5-2780f5684bde.png";
  let option = {
    xAxis: {
      show: false,
    },
    tooltip: {
      show: true,
    },
    yAxis: [
      {
        triggerEvent: true,
        show: true,
        data: data.map((item) => item.name),
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          inside: true,
          color: "#1C1C1C",
        //   fontFamily: "Alibaba PuHuiTi",
          fontSize: 16,
          margin: 0,
          padding: [0, 0, 10, 0],
          align: "left",
          verticalAlign: "bottom",
        },
      },
      {
        show: true,
        offset: 35,
        data: data.map((item) => item.value),
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          margin: 0,
          interval: 0,
          inside: false,
          padding: [10, 30, 10, 0],
          color: "#2D79E3",
        //   fontFamily: "Alibaba PuHuiTi",
          fontSize: 16,
          align: "right",
          verticalAlign: "bottom",
          formatter: (value) => {
            const percent = ((value / sum) * 100).toFixed(2);
            `{count|${value}}: {percent|${percent}%}`;
            return `{count|${value}}{percent|(${percent}%)}`;
          },
          rich: {
            // 此count对应的是 formatter|前的count
            count: {
              // color: colorList[index][0]
            },
            percent: {
              // color: colorList[index][1]
            },
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        barMinWidth: "5",
        yAxisIndex: 0,
        data: data,
        barWidth: 8,
        z: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 20,
          },
        },
      },
      {
        data: data,
        type: "pictorialBar",
        barMaxWidth: 20,
        symbolPosition: "end",
        symbol: "image://" + lab,
        symbolOffset: [10, 0],
        symbolSize: [20, 20],
        zlevel: 2,
        silent: true,
      },
      {
        type: "bar",
        barGap: "-100%",
        yAxisIndex: 0,
        data: data.map((item) => sum),
        barWidth: 8,
        itemStyle: {
          barBorderRadius: 20,
          color: "#9BBBE5",
        },
        z: 0,
        silent: true,
      },
    ],
  };
  chart.setOption(option);
  // 为窗口的resize事件绑定处理函数
  window.onresize = function () {
    // 让图表的宽高自适应容器的大小
    chart.resize();
  };
}

onMounted(() => {
  initEchart();
});
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
}
</style>
